<template>
  <div>
    <div ref="main" style="width: 400px; height: 400px; border: solid 1px red"></div>
    <div ref="area1" style="width: 400px; height: 400px; border: solid 1px red"></div>
    <div ref="area2" style="width: 400px; height: 400px; border: solid 1px red"></div>
    <div ref="area3" style="width: 400px; height: 400px; border: solid 1px red"></div>
  </div>
</template>
<script lang="ts">
import { echarts } from '@/plugins/echarts'
import type { EChartsOption } from 'echarts'

// import type { EChartsOption } from 'echarts'

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: 'PractiseSix',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value'
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.gene()
    this.gene1()
    this.gene2()
    this.gene3()
  },
  activated(){
    this.gene3()
  },
  methods: {
    // sampleM() {},
    gene() {
      const main: any = this.$refs.main
      const myChart = echarts.init(main)
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    },
    gene1() {
      const area1: any = this.$refs.area1
      const chart = echarts.init(area1)
      let option: EChartsOption = {
        title: {
          text: 'xxxx'
        },
        xAxis: {
          type: 'category',
          data: ['tool', 'machine', '机器', 'some', 'any']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'first',
            type: 'bar',
            data: [1, 2, 3, 10, 11]
            //   data: [11, 12, 3, 10, 11],
          },
          {
            name: 'second',
            type: 'bar',
            //   data: [1, 2, 3, 10, 11],
            data: [11, 12, 3, 10, 11]
          }
        ]
      }
      chart.setOption(option)
      //   button.addEventListener("click",()=>{})
      chart.on('click', (a: any) => {
        console.log('---------')
        console.log(a)
        ElMessage.warning('当前的具体值是:' + a.data)
      })
      // setTimeout(()=>{
      //   chart.setOption({
      //   series: {
      //     name:'first',
      //     type: 'bar',
      //     data: [10, 7, 4, 2, 1]
      //   }
      // })
      // },5000)
    },
    gene2() {
      const area2: any = this.$refs.area2
      const chart = echarts.init(area2)
      let option: EChartsOption = {
        title: {
          text: 'Testing...'
        },
        series: [
          {
            name: 'PIE',
            type: 'pie',
            data: [
              { name: 'xxx', value: 11 },
              { name: 'yyy', value: 22 },
              { name: 'zzz', value: 44 }
            ],
            radius: ['50%', '100%']
          }
        ]
      }
      chart.setOption(option)
    },
    async gene3() {
      // 发起请求
      const res = await axios({
        method: 'get',
        url: 'http://localhost:7001/material/echart/count'
      })
      console.log(res.data)
      // 数据格式化

      //  {materialType: 'tool', cnt: '7'}
      //   { name: 'xxx', value: 11 },
      const mydata = res.data.map((x: any) => {
        return {
          name: x.materialType,
          value: x.cnt
        }
      })
      // 渲染
      const area3: any = this.$refs.area3
      const chart = echarts.init(area3)
      let option: EChartsOption = {
        title: {
          text: 'Testing...'
        },
        tooltip:{},
        series: [
          {
            name: 'PIE',
            type: 'pie',
            data: mydata
          }
        ]
      }
      chart.setOption(option)
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
